ವೆಬ್‌ಕೋಡೆಕ್ಸ್ ವೀಡಿಯೊಫ್ರೇಮ್ ಪ್ಲೇನ್: ವೀಡಿಯೊ ಫ್ರೇಮ್ ಡೇಟಾ ಪ್ರವೇಶದ ಆಳವಾದ ಅಧ್ಯಯನ

ವೆಬ್‌ಕೋಡೆಕ್ಸ್ ವೆಬ್-ಆಧಾರಿತ ಮೀಡಿಯಾ ಸಂಸ್ಕರಣೆಯಲ್ಲಿ ಒಂದು ಮಾದರಿ ಬದಲಾವಣೆಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಇದು ಮೀಡಿಯಾದ ಮೂಲಭೂತ ಅಂಶಗಳಿಗೆ ಕೆಳಮಟ್ಟದ ಪ್ರವೇಶವನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದರಿಂದ ಡೆವಲಪರ್‌ಗಳು ನೇರವಾಗಿ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಅತ್ಯಾಧುನಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ. ವೆಬ್‌ಕೋಡೆಕ್ಸ್‌ನ ಅತ್ಯಂತ ಶಕ್ತಿಶಾಲಿ ವೈಶಿಷ್ಟ್ಯಗಳಲ್ಲಿ ಒಂದು VideoFrame ಆಬ್ಜೆಕ್ಟ್, ಮತ್ತು ಅದರೊಳಗೆ, ವೀಡಿಯೊ ಫ್ರೇಮ್‌ಗಳ ಕಚ್ಚಾ ಪಿಕ್ಸೆಲ್ ಡೇಟಾವನ್ನು ಬಹಿರಂಗಪಡಿಸುವ VideoFrame ಪ್ಲೇನ್‌ಗಳು. ಈ ಲೇಖನವು ಸುಧಾರಿತ ವೀಡಿಯೊ ಮ್ಯಾನಿಪ್ಯುಲೇಶನ್‌ಗಾಗಿ VideoFrame ಪ್ಲೇನ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ಬಳಸಿಕೊಳ್ಳಲು ಒಂದು ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯನ್ನು ಒದಗಿಸುತ್ತದೆ.

ವೀಡಿಯೊಫ್ರೇಮ್ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ಪ್ಲೇನ್‌ಗಳ ಬಗ್ಗೆ ತಿಳಿಯುವ ಮೊದಲು, VideoFrame ಆಬ್ಜೆಕ್ಟ್ ಬಗ್ಗೆ ಸಂಕ್ಷಿಪ್ತವಾಗಿ ನೋಡೋಣ. ಒಂದು VideoFrame ವೀಡಿಯೊದ ಒಂದೇ ಫ್ರೇಮ್ ಅನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಇದು ಡಿಕೋಡ್ ಮಾಡಲಾದ (ಅಥವಾ ಎನ್‌ಕೋಡ್ ಮಾಡಲಾದ) ವೀಡಿಯೊ ಡೇಟಾವನ್ನು, ಅದರ ಜೊತೆಗೆ ಟೈಮ್‌ಸ್ಟ್ಯಾಂಪ್, ಅವಧಿ, ಮತ್ತು ಫಾರ್ಮ್ಯಾಟ್ ಮಾಹಿತಿಯಂತಹ ಸಂಬಂಧಿತ ಮೆಟಾಡೇಟಾವನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ. VideoFrame API ಈ ಕೆಳಗಿನ ವಿಧಾನಗಳನ್ನು ನೀಡುತ್ತದೆ:

• ಪಿಕ್ಸೆಲ್ ಡೇಟಾವನ್ನು ಓದುವುದು: ಇಲ್ಲಿಯೇ ಪ್ಲೇನ್‌ಗಳು ಬರುತ್ತವೆ.
• ಫ್ರೇಮ್‌ಗಳನ್ನು ನಕಲಿಸುವುದು: ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ VideoFrame ಆಬ್ಜೆಕ್ಟ್‌ಗಳಿಂದ ಹೊಸದನ್ನು ರಚಿಸುವುದು.
• ಫ್ರೇಮ್‌ಗಳನ್ನು ಮುಚ್ಚುವುದು: ಫ್ರೇಮ್ ಹೊಂದಿರುವ ಆಧಾರವಾಗಿರುವ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಬಿಡುಗಡೆ ಮಾಡುವುದು.

VideoFrame ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಡಿಕೋಡಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯ ಸಮಯದಲ್ಲಿ, ಸಾಮಾನ್ಯವಾಗಿ VideoDecoder ನಿಂದ ರಚಿಸಲಾಗುತ್ತದೆ, ಅಥವಾ ಕಸ್ಟಮ್ ಫ್ರೇಮ್ ರಚಿಸುವಾಗ ಹಸ್ತಚಾಲಿತವಾಗಿ ರಚಿಸಲಾಗುತ್ತದೆ.

ವೀಡಿಯೊಫ್ರೇಮ್ ಪ್ಲೇನ್‌ಗಳು ಎಂದರೇನು?

ಒಂದು VideoFrameನ ಪಿಕ್ಸೆಲ್ ಡೇಟಾವನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಬಹು ಪ್ಲೇನ್‌ಗಳಾಗಿ ಸಂಘಟಿಸಲಾಗುತ್ತದೆ, ವಿಶೇಷವಾಗಿ YUV ನಂತಹ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳಲ್ಲಿ. ಪ್ರತಿಯೊಂದು ಪ್ಲೇನ್ ಚಿತ್ರದ ವಿಭಿನ್ನ ಘಟಕವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, YUV420 ಫಾರ್ಮ್ಯಾಟ್‌ನಲ್ಲಿ ಮೂರು ಪ್ಲೇನ್‌ಗಳಿವೆ:

• Y (Luma): ಚಿತ್ರದ ಹೊಳಪನ್ನು (ಪ್ರಕಾಶಮಾನತೆಯನ್ನು) ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಈ ಪ್ಲೇನ್ ಗ್ರೇಸ್ಕೇಲ್ ಮಾಹಿತಿಯನ್ನು ಹೊಂದಿರುತ್ತದೆ.
• U (Cb): ನೀಲಿ-ವ್ಯತ್ಯಾಸದ ಕ್ರೋಮಾ ಘಟಕವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ.
• V (Cr): ಕೆಂಪು-ವ್ಯತ್ಯಾಸದ ಕ್ರೋಮಾ ಘಟಕವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ.

RGB ಫಾರ್ಮ್ಯಾಟ್‌ಗಳು, ಸರಳವೆಂದು ತೋರಿದರೂ, ಕೆಲವು ಸಂದರ್ಭಗಳಲ್ಲಿ ಬಹು ಪ್ಲೇನ್‌ಗಳನ್ನು ಬಳಸಬಹುದು. ಪ್ಲೇನ್‌ಗಳ ಸಂಖ್ಯೆ ಮತ್ತು ಅವುಗಳ ಅರ್ಥವು ಸಂಪೂರ್ಣವಾಗಿ VideoFrameನ VideoPixelFormat ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುತ್ತದೆ.

ಪ್ಲೇನ್‌ಗಳನ್ನು ಬಳಸುವುದರ ಪ್ರಯೋಜನವೆಂದರೆ, ಇದು ನಿರ್ದಿಷ್ಟ ಬಣ್ಣದ ಘಟಕಗಳಿಗೆ ದಕ್ಷ ಪ್ರವೇಶ ಮತ್ತು ಮ್ಯಾನಿಪ್ಯುಲೇಶನ್‌ಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ನೀವು ಬಣ್ಣವನ್ನು (U ಮತ್ತು V ಪ್ಲೇನ್‌ಗಳು) ಬಾಧಿಸದೆ ಕೇವಲ ಪ್ರಕಾಶಮಾನತೆಯನ್ನು (Y ಪ್ಲೇನ್) ಸರಿಹೊಂದಿಸಲು ಬಯಸಬಹುದು.

ವೀಡಿಯೊಫ್ರೇಮ್ ಪ್ಲೇನ್‌ಗಳನ್ನು ಪ್ರವೇಶಿಸುವುದು: API

VideoFrame API ಪ್ಲೇನ್ ಡೇಟಾವನ್ನು ಪ್ರವೇಶಿಸಲು ಈ ಕೆಳಗಿನ ವಿಧಾನಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ:

• copyTo(destination, options): VideoFrameನ ವಿಷಯವನ್ನು ಗಮ್ಯಸ್ಥಾನಕ್ಕೆ ನಕಲಿಸುತ್ತದೆ, ಅದು ಮತ್ತೊಂದು VideoFrame, ಒಂದು CanvasImageBitmap, ಅಥವಾ ಒಂದು ArrayBufferView ಆಗಿರಬಹುದು. options ಆಬ್ಜೆಕ್ಟ್ ಯಾವ ಪ್ಲೇನ್‌ಗಳನ್ನು ಮತ್ತು ಹೇಗೆ ನಕಲಿಸಬೇಕು ಎಂಬುದನ್ನು ನಿಯಂತ್ರಿಸುತ್ತದೆ. ಪ್ಲೇನ್ ಪ್ರವೇಶಕ್ಕಾಗಿ ಇದು ಪ್ರಾಥಮಿಕ ಯಾಂತ್ರಿಕತೆಯಾಗಿದೆ.

copyTo ವಿಧಾನದಲ್ಲಿನ options ಆಬ್ಜೆಕ್ಟ್ ವೀಡಿಯೊ ಫ್ರೇಮ್ ಡೇಟಾದ ಲೇಔಟ್ ಮತ್ತು ಗುರಿಯನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಪ್ರಮುಖ ಗುಣಲಕ್ಷಣಗಳು ಸೇರಿವೆ:

• format: ನಕಲಿಸಿದ ಡೇಟಾದ ಅಪೇಕ್ಷಿತ ಪಿಕ್ಸೆಲ್ ಫಾರ್ಮ್ಯಾಟ್. ಇದು ಮೂಲ VideoFrameನಂತೆಯೇ ಇರಬಹುದು ಅಥವಾ ವಿಭಿನ್ನ ಫಾರ್ಮ್ಯಾಟ್ ಆಗಿರಬಹುದು (ಉದಾ., YUV ನಿಂದ RGB ಗೆ ಪರಿವರ್ತಿಸುವುದು).
• codedWidth ಮತ್ತು codedHeight: ವೀಡಿಯೊ ಫ್ರೇಮ್‌ನ ಅಗಲ ಮತ್ತು ಎತ್ತರ ಪಿಕ್ಸೆಲ್‌ಗಳಲ್ಲಿ.
• layout: ಮೆಮೊರಿಯಲ್ಲಿ ಪ್ರತಿ ಪ್ಲೇನ್‌ನ ಲೇಔಟ್ ಅನ್ನು ವಿವರಿಸುವ ಆಬ್ಜೆಕ್ಟ್‌ಗಳ ಒಂದು ಸರಣಿ. ಸರಣಿಯಲ್ಲಿನ ಪ್ರತಿಯೊಂದು ಆಬ್ಜೆಕ್ಟ್ ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ:
• offset: ಡೇಟಾ ಬಫರ್‌ನ ಪ್ರಾರಂಭದಿಂದ ಪ್ಲೇನ್‌ನ ಡೇಟಾದ ಆರಂಭದವರೆಗೆ, ಬೈಟ್‌ಗಳಲ್ಲಿನ ಆಫ್‌ಸೆಟ್.
• stride: ಪ್ಲೇನ್‌ನಲ್ಲಿನ ಪ್ರತಿ ಸಾಲಿನ ಆರಂಭದ ನಡುವಿನ ಬೈಟ್‌ಗಳ ಸಂಖ್ಯೆ. ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ನಿಭಾಯಿಸಲು ಇದು ನಿರ್ಣಾಯಕವಾಗಿದೆ.

YUV420 VideoFrame ಅನ್ನು ಕಚ್ಚಾ ಬಫರ್‌ಗೆ ನಕಲಿಸುವ ಉದಾಹರಣೆಯನ್ನು ನೋಡೋಣ:

async function copyYUV420ToBuffer(videoFrame, buffer) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;

  // YUV420 ನಲ್ಲಿ 3 ಪ್ಲೇನ್‌ಗಳಿವೆ: Y, U, ಮತ್ತು V
  const yPlaneSize = width * height;
  const uvPlaneSize = width * height / 4;

  const layout = [
    { offset: 0, stride: width }, // Y ಪ್ಲೇನ್
    { offset: yPlaneSize, stride: width / 2 }, // U ಪ್ಲೇನ್
    { offset: yPlaneSize + uvPlaneSize, stride: width / 2 } // V ಪ್ಲೇನ್
  ];

  await videoFrame.copyTo(buffer, {
    format: 'I420',
    codedWidth: width,
    codedHeight: height,
    layout: layout
  });

  videoFrame.close(); // ಸಂಪನ್ಮೂಲಗಳನ್ನು ಬಿಡುಗಡೆ ಮಾಡುವುದು ಮುಖ್ಯ
}

ವಿವರಣೆ:

• ನಾವು ಪ್ರತಿ ಪ್ಲೇನ್‌ನ ಗಾತ್ರವನ್ನು width ಮತ್ತು height ಆಧರಿಸಿ ಲೆಕ್ಕ ಹಾಕುತ್ತೇವೆ. Y ಪೂರ್ಣ ರೆಸಲ್ಯೂಶನ್‌ನಲ್ಲಿದೆ, ಆದರೆ U ಮತ್ತು V ಸಬ್‌ಸ್ಯಾಂಪಲ್ ಮಾಡಲಾಗಿದೆ (4:2:0).
• layout ಸರಣಿಯು ಮೆಮೊರಿ ಲೇಔಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. offset ಪ್ರತಿ ಪ್ಲೇನ್ ಬಫರ್‌ನಲ್ಲಿ ಎಲ್ಲಿ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ, ಮತ್ತು stride ಆ ಪ್ಲೇನ್‌ನಲ್ಲಿ ಮುಂದಿನ ಸಾಲಿಗೆ ಹೋಗಲು ಜಿಗಿಯಬೇಕಾದ ಬೈಟ್‌ಗಳ ಸಂಖ್ಯೆಯನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ.
• format ಆಯ್ಕೆಯನ್ನು 'I420' ಗೆ ಹೊಂದಿಸಲಾಗಿದೆ, ಇದು ಸಾಮಾನ್ಯ YUV420 ಫಾರ್ಮ್ಯಾಟ್ ಆಗಿದೆ.
• ನಿರ್ಣಾಯಕವಾಗಿ, ನಕಲು ಮಾಡಿದ ನಂತರ, ಸಂಪನ್ಮೂಲಗಳನ್ನು ಮುಕ್ತಗೊಳಿಸಲು videoFrame.close() ಅನ್ನು ಕರೆಯಲಾಗುತ್ತದೆ.

ಪಿಕ್ಸೆಲ್ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳು: ಸಾಧ್ಯತೆಗಳ ಜಗತ್ತು

VideoFrame ಪ್ಲೇನ್‌ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ಪಿಕ್ಸೆಲ್ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಅತ್ಯಗತ್ಯ. VideoPixelFormat ವೀಡಿಯೊ ಫ್ರೇಮ್‌ನಲ್ಲಿ ಬಣ್ಣದ ಮಾಹಿತಿಯನ್ನು ಹೇಗೆ ಎನ್‌ಕೋಡ್ ಮಾಡಲಾಗಿದೆ ಎಂಬುದನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ನೀವು ಎದುರಿಸಬಹುದಾದ ಕೆಲವು ಸಾಮಾನ್ಯ ಪಿಕ್ಸೆಲ್ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳು ಇಲ್ಲಿವೆ:

• I420 (YUV420p): Y, U, ಮತ್ತು V ಘಟಕಗಳನ್ನು ಪ್ರತ್ಯೇಕ ಪ್ಲೇನ್‌ಗಳಲ್ಲಿ ಸಂಗ್ರಹಿಸಲಾದ ಪ್ಲ್ಯಾನರ್ YUV ಫಾರ್ಮ್ಯಾಟ್. U ಮತ್ತು V ಗಳನ್ನು ಸಮತಲ ಮತ್ತು ಲಂಬ ಆಯಾಮಗಳಲ್ಲಿ 2 ರ ಅಂಶದಿಂದ ಸಬ್‌ಸ್ಯಾಂಪಲ್ ಮಾಡಲಾಗುತ್ತದೆ. ಇದು ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ಮತ್ತು ದಕ್ಷ ಫಾರ್ಮ್ಯಾಟ್ ಆಗಿದೆ.
• NV12 (YUV420sp): ಒಂದು ಸೆಮಿ-ಪ್ಲ್ಯಾನರ್ YUV ಫಾರ್ಮ್ಯಾಟ್, ಇದರಲ್ಲಿ Y ಅನ್ನು ಒಂದು ಪ್ಲೇನ್‌ನಲ್ಲಿ ಸಂಗ್ರಹಿಸಲಾಗುತ್ತದೆ ಮತ್ತು U ಮತ್ತು V ಘಟಕಗಳನ್ನು ಎರಡನೇ ಪ್ಲೇನ್‌ನಲ್ಲಿ ಇಂಟರ್‌ಲೀವ್ ಮಾಡಲಾಗುತ್ತದೆ.
• RGBA: ಕೆಂಪು, ಹಸಿರು, ನೀಲಿ, ಮತ್ತು ಆಲ್ಫಾ ಘಟಕಗಳನ್ನು ಒಂದೇ ಪ್ಲೇನ್‌ನಲ್ಲಿ ಸಂಗ್ರಹಿಸಲಾಗುತ್ತದೆ, ಸಾಮಾನ್ಯವಾಗಿ ಪ್ರತಿ ಘಟಕಕ್ಕೆ 8 ಬಿಟ್‌ಗಳು (ಪ್ರತಿ ಪಿಕ್ಸೆಲ್‌ಗೆ 32 ಬಿಟ್‌ಗಳು). ಘಟಕಗಳ ಕ್ರಮವು ಬದಲಾಗಬಹುದು (ಉದಾ., BGRA).
• RGB565: ಕೆಂಪು, ಹಸಿರು, ಮತ್ತು ನೀಲಿ ಘಟಕಗಳನ್ನು ಒಂದೇ ಪ್ಲೇನ್‌ನಲ್ಲಿ ಸಂಗ್ರಹಿಸಲಾಗುತ್ತದೆ, ಕೆಂಪುಗೆ 5 ಬಿಟ್‌ಗಳು, ಹಸಿರುಗೆ 6 ಬಿಟ್‌ಗಳು ಮತ್ತು ನೀಲಿಗೆ 5 ಬಿಟ್‌ಗಳು (ಪ್ರತಿ ಪಿಕ್ಸೆಲ್‌ಗೆ 16 ಬಿಟ್‌ಗಳು).
• GRAYSCALE: ಪ್ರತಿ ಪಿಕ್ಸೆಲ್‌ಗೆ ಒಂದೇ ಲೂಮಾ (ಹೊಳಪು) ಮೌಲ್ಯದೊಂದಿಗೆ ಗ್ರೇಸ್ಕೇಲ್ ಚಿತ್ರಗಳನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ.

VideoFrame.format ಪ್ರಾಪರ್ಟಿ ನಿಮಗೆ ನಿರ್ದಿಷ್ಟ ಫ್ರೇಮ್‌ನ ಪಿಕ್ಸೆಲ್ ಫಾರ್ಮ್ಯಾಟ್ ಅನ್ನು ತಿಳಿಸುತ್ತದೆ. ಪ್ಲೇನ್‌ಗಳನ್ನು ಪ್ರವೇಶಿಸಲು ಪ್ರಯತ್ನಿಸುವ ಮೊದಲು ಈ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಪರೀಕ್ಷಿಸಲು ಮರೆಯದಿರಿ. ಬೆಂಬಲಿತ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳ ಸಂಪೂರ್ಣ ಪಟ್ಟಿಗಾಗಿ ನೀವು ವೆಬ್‌ಕೋಡೆಕ್ಸ್ ನಿರ್ದಿಷ್ಟೀಕರಣವನ್ನು ಸಂಪರ್ಕಿಸಬಹುದು.

ಪ್ರಾಯೋಗಿಕ ಬಳಕೆಯ ಪ್ರಕರಣಗಳು

VideoFrame ಪ್ಲೇನ್‌ಗಳನ್ನು ಪ್ರವೇಶಿಸುವುದು ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಸುಧಾರಿತ ವೀಡಿಯೊ ಸಂಸ್ಕರಣೆಗಾಗಿ ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಸಾಧ್ಯತೆಗಳನ್ನು ತೆರೆಯುತ್ತದೆ. ಕೆಲವು ಉದಾಹರಣೆಗಳು ಇಲ್ಲಿವೆ:

1. ರಿಯಲ್-ಟೈಮ್ ವೀಡಿಯೊ ಎಫೆಕ್ಟ್ಸ್

VideoFrame ನಲ್ಲಿ ಪಿಕ್ಸೆಲ್ ಡೇಟಾವನ್ನು ಮ್ಯಾನಿಪ್ಯುಲೇಟ್ ಮಾಡುವ ಮೂಲಕ ನೀವು ರಿಯಲ್-ಟೈಮ್ ವೀಡಿಯೊ ಎಫೆಕ್ಟ್ಸ್ ಅನ್ನು ಅನ್ವಯಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ, RGBA ಫ್ರೇಮ್‌ನಲ್ಲಿನ ಪ್ರತಿ ಪಿಕ್ಸೆಲ್‌ನ R, G, ಮತ್ತು B ಘಟಕಗಳನ್ನು ಸರಾಸರಿ ಮಾಡಿ, ನಂತರ ಎಲ್ಲಾ ಮೂರು ಘಟಕಗಳನ್ನು ಆ ಸರಾಸರಿ ಮೌಲ್ಯಕ್ಕೆ ಹೊಂದಿಸುವ ಮೂಲಕ ನೀವು ಗ್ರೇಸ್ಕೇಲ್ ಫಿಲ್ಟರ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಬಹುದು. ನೀವು ಸೆಪಿಯಾ ಟೋನ್ ಎಫೆಕ್ಟ್ ಅನ್ನು ರಚಿಸಬಹುದು ಅಥವಾ ಹೊಳಪು ಮತ್ತು ಕಾಂಟ್ರಾಸ್ಟ್ ಅನ್ನು ಸರಿಹೊಂದಿಸಬಹುದು.

async function applyGrayscale(videoFrame) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;
  const buffer = new ArrayBuffer(width * height * 4); // RGBA
  const rgba = new Uint8ClampedArray(buffer);

  await videoFrame.copyTo(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height
  });

  for (let i = 0; i < rgba.length; i += 4) {
    const r = rgba[i];
    const g = rgba[i + 1];
    const b = rgba[i + 2];

    const gray = (r + g + b) / 3;

    rgba[i] = gray;       // ಕೆಂಪು
    rgba[i + 1] = gray;   // ಹಸಿರು
    rgba[i + 2] = gray;   // ನೀಲಿ
  }

  // ಮಾರ್ಪಡಿಸಿದ ಡೇಟಾದಿಂದ ಹೊಸ VideoFrame ಅನ್ನು ರಚಿಸಿ.
  const newFrame = new VideoFrame(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  videoFrame.close(); // ಮೂಲ ಫ್ರೇಮ್ ಅನ್ನು ಬಿಡುಗಡೆ ಮಾಡಿ
  return newFrame;
}

2. ಕಂಪ್ಯೂಟರ್ ದೃಷ್ಟಿ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು

VideoFrame ಪ್ಲೇನ್‌ಗಳು ಕಂಪ್ಯೂಟರ್ ದೃಷ್ಟಿ ಕಾರ್ಯಗಳಿಗಾಗಿ ಅಗತ್ಯವಿರುವ ಪಿಕ್ಸೆಲ್ ಡೇಟಾಗೆ ನೇರ ಪ್ರವೇಶವನ್ನು ಒದಗಿಸುತ್ತವೆ. ಆಬ್ಜೆಕ್ಟ್ ಡಿಟೆಕ್ಷನ್, ಮುಖ ಗುರುತಿಸುವಿಕೆ, ಚಲನೆಯ ಟ್ರ್ಯಾಕಿಂಗ್, ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಿಗಾಗಿ ಅಲ್ಗಾರಿದಮ್‌ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ನೀವು ಈ ಡೇಟಾವನ್ನು ಬಳಸಬಹುದು. ನಿಮ್ಮ ಕೋಡ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆ-ನಿರ್ಣಾಯಕ ವಿಭಾಗಗಳಿಗಾಗಿ ನೀವು ವೆಬ್‌ಅಸೆಂಬ್ಲಿಯನ್ನು ಬಳಸಿಕೊಳ್ಳಬಹುದು.

ಉದಾಹರಣೆಗೆ, ನೀವು ಬಣ್ಣದ VideoFrame ಅನ್ನು ಗ್ರೇಸ್ಕೇಲ್‌ಗೆ ಪರಿವರ್ತಿಸಿ ನಂತರ ಚಿತ್ರದಲ್ಲಿನ ಅಂಚುಗಳನ್ನು ಗುರುತಿಸಲು ಅಂಚು ಪತ್ತೆ ಅಲ್ಗಾರಿದಮ್ ಅನ್ನು (ಉದಾ., ಸೋಬೆಲ್ ಆಪರೇಟರ್) ಅನ್ವಯಿಸಬಹುದು. ಇದನ್ನು ಆಬ್ಜೆಕ್ಟ್ ಗುರುತಿಸುವಿಕೆಗಾಗಿ ಪೂರ್ವ-ಸಂಸ್ಕರಣಾ ಹಂತವಾಗಿ ಬಳಸಬಹುದು.

3. ವೀಡಿಯೊ ಎಡಿಟಿಂಗ್ ಮತ್ತು ಕಾಂಪೋಸಿಟಿಂಗ್

ಕ್ರಾಪಿಂಗ್, ಸ್ಕೇಲಿಂಗ್, ರೊಟೇಶನ್, ಮತ್ತು ಕಾಂಪೋಸಿಟಿಂಗ್‌ನಂತಹ ವೀಡಿಯೊ ಎಡಿಟಿಂಗ್ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ನೀವು VideoFrame ಪ್ಲೇನ್‌ಗಳನ್ನು ಬಳಸಬಹುದು. ಪಿಕ್ಸೆಲ್ ಡೇಟಾವನ್ನು ನೇರವಾಗಿ ಮ್ಯಾನಿಪ್ಯುಲೇಟ್ ಮಾಡುವ ಮೂಲಕ, ನೀವು ಕಸ್ಟಮ್ ಪರಿವರ್ತನೆಗಳು ಮತ್ತು ಎಫೆಕ್ಟ್ಸ್ ಅನ್ನು ರಚಿಸಬಹುದು.

ಉದಾಹರಣೆಗೆ, ನೀವು VideoFrame ಅನ್ನು ಕ್ರಾಪ್ ಮಾಡಲು ಪಿಕ್ಸೆಲ್ ಡೇಟಾದ ಒಂದು ಭಾಗವನ್ನು ಮಾತ್ರ ಹೊಸ VideoFrame ಗೆ ನಕಲಿಸಬಹುದು. ನೀವು ಅದಕ್ಕೆ ತಕ್ಕಂತೆ layout ಆಫ್‌ಸೆಟ್‌ಗಳು ಮತ್ತು ಸ್ಟ್ರೈಡ್‌ಗಳನ್ನು ಸರಿಹೊಂದಿಸಬೇಕಾಗುತ್ತದೆ.

4. ಕಸ್ಟಮ್ ಕೋಡೆಕ್‌ಗಳು ಮತ್ತು ಟ್ರಾನ್ಸ್‌ಕೋಡಿಂಗ್

ವೆಬ್‌ಕೋಡೆಕ್ಸ್ AV1, VP9, ಮತ್ತು H.264 ನಂತಹ ಸಾಮಾನ್ಯ ಕೋಡೆಕ್‌ಗಳಿಗೆ ಅಂತರ್ನಿರ್ಮಿತ ಬೆಂಬಲವನ್ನು ಒದಗಿಸುತ್ತದೆಯಾದರೂ, ಕಸ್ಟಮ್ ಕೋಡೆಕ್‌ಗಳು ಅಥವಾ ಟ್ರಾನ್ಸ್‌ಕೋಡಿಂಗ್ ಪೈಪ್‌ಲೈನ್‌ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ನೀವು ಇದನ್ನು ಬಳಸಬಹುದು. ನೀವು ಎನ್‌ಕೋಡಿಂಗ್ ಮತ್ತು ಡಿಕೋಡಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ನೀವೇ ನಿಭಾಯಿಸಬೇಕಾಗುತ್ತದೆ, ಆದರೆ VideoFrame ಪ್ಲೇನ್‌ಗಳು ನಿಮಗೆ ಕಚ್ಚಾ ಪಿಕ್ಸೆಲ್ ಡೇಟಾವನ್ನು ಪ್ರವೇಶಿಸಲು ಮತ್ತು ಮ್ಯಾನಿಪ್ಯುಲೇಟ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ. ಇದು ವಿಶಿಷ್ಟ ವೀಡಿಯೊ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳು ಅಥವಾ ವಿಶೇಷ ಎನ್‌ಕೋಡಿಂಗ್ ಅವಶ್ಯಕತೆಗಳಿಗೆ ಉಪಯುಕ್ತವಾಗಬಹುದು.

5. ಸುಧಾರಿತ ವಿಶ್ಲೇಷಣೆ

ಆಧಾರವಾಗಿರುವ ಪಿಕ್ಸೆಲ್ ಡೇಟಾವನ್ನು ಪ್ರವೇಶಿಸುವ ಮೂಲಕ, ನೀವು ವೀಡಿಯೊ ವಿಷಯದ ಆಳವಾದ ವಿಶ್ಲೇಷಣೆಯನ್ನು ಮಾಡಬಹುದು. ಇದು ಒಂದು ದೃಶ್ಯದ ಸರಾಸರಿ ಹೊಳಪನ್ನು ಅಳೆಯುವುದು, ಪ್ರಬಲ ಬಣ್ಣಗಳನ್ನು ಗುರುತಿಸುವುದು, ಅಥವಾ ದೃಶ್ಯದ ವಿಷಯದಲ್ಲಿನ ಬದಲಾವಣೆಗಳನ್ನು ಪತ್ತೆಹಚ್ಚುವಂತಹ ಕಾರ್ಯಗಳನ್ನು ಒಳಗೊಂಡಿದೆ. ಇದು ಭದ್ರತೆ, ಕಣ್ಗಾವಲು, ಅಥವಾ ವಿಷಯ ವಿಶ್ಲೇಷಣೆಗಾಗಿ ಸುಧಾರಿತ ವೀಡಿಯೊ ವಿಶ್ಲೇಷಣಾ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಬಹುದು.

ಕ್ಯಾನ್ವಾಸ್ ಮತ್ತು WebGL ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವುದು

ನೀವು VideoFrame ಪ್ಲೇನ್‌ಗಳಲ್ಲಿ ಪಿಕ್ಸೆಲ್ ಡೇಟಾವನ್ನು ನೇರವಾಗಿ ಮ್ಯಾನಿಪ್ಯುಲೇಟ್ ಮಾಡಬಹುದಾದರೂ, ನೀವು ಆಗಾಗ್ಗೆ ಫಲಿತಾಂಶವನ್ನು ಪರದೆಯ ಮೇಲೆ ನಿರೂಪಿಸಬೇಕಾಗುತ್ತದೆ. CanvasImageBitmap ಇಂಟರ್ಫೇಸ್ VideoFrame ಮತ್ತು <canvas> ಎಲಿಮೆಂಟ್ ನಡುವೆ ಸೇತುವೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ. ನೀವು VideoFrame ನಿಂದ CanvasImageBitmap ಅನ್ನು ರಚಿಸಬಹುದು ಮತ್ತು ನಂತರ ಅದನ್ನು drawImage() ವಿಧಾನವನ್ನು ಬಳಸಿ ಕ್ಯಾನ್ವಾಸ್ ಮೇಲೆ ಚಿತ್ರಿಸಬಹುದು.

async function renderVideoFrameToCanvas(videoFrame, canvas) {
  const bitmap = await createImageBitmap(videoFrame);
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  bitmap.close(); // ಬಿಟ್‌ಮ್ಯಾಪ್ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಬಿಡುಗಡೆ ಮಾಡಿ
  videoFrame.close(); // VideoFrame ಸಂಪನ್ಮೂಲಗಳನ್ನು ಬಿಡುಗಡೆ ಮಾಡಿ
}

ಹೆಚ್ಚು ಸುಧಾರಿತ ರೆಂಡರಿಂಗ್‌ಗಾಗಿ, ನೀವು WebGL ಅನ್ನು ಬಳಸಬಹುದು. ನೀವು VideoFrame ಪ್ಲೇನ್‌ಗಳಿಂದ ಪಿಕ್ಸೆಲ್ ಡೇಟಾವನ್ನು WebGL ಟೆಕ್ಸ್ಚರ್‌ಗಳಿಗೆ ಅಪ್‌ಲೋಡ್ ಮಾಡಬಹುದು ಮತ್ತು ನಂತರ ಎಫೆಕ್ಟ್ಸ್ ಮತ್ತು ರೂಪಾಂತರಗಳನ್ನು ಅನ್ವಯಿಸಲು ಶೇಡರ್‌ಗಳನ್ನು ಬಳಸಬಹುದು. ಇದು ಉನ್ನತ-ಕಾರ್ಯಕ್ಷಮತೆಯ ವೀಡಿಯೊ ಸಂಸ್ಕರಣೆಗಾಗಿ GPU ಅನ್ನು ಬಳಸಿಕೊಳ್ಳಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

ಕಾರ್ಯಕ್ಷಮತೆಯ ಪರಿಗಣನೆಗಳು

ಕಚ್ಚಾ ಪಿಕ್ಸೆಲ್ ಡೇಟಾದೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವುದು ಗಣನೀಯವಾಗಿ ಶ್ರಮದಾಯಕವಾಗಿರುತ್ತದೆ, ಆದ್ದರಿಂದ ಕಾರ್ಯಕ್ಷಮತೆಯ ಆಪ್ಟಿಮೈಸೇಶನ್ ಅನ್ನು ಪರಿಗಣಿಸುವುದು ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಕೆಲವು ಸಲಹೆಗಳು ಇಲ್ಲಿವೆ:

• ನಕಲುಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಿ: ಅನಗತ್ಯ ಪಿಕ್ಸೆಲ್ ಡೇಟಾವನ್ನು ನಕಲಿಸುವುದನ್ನು ತಪ್ಪಿಸಿ. ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ಇನ್-ಪ್ಲೇಸ್‌ನಲ್ಲಿ ನಿರ್ವಹಿಸಲು ಪ್ರಯತ್ನಿಸಿ.
• ವೆಬ್‌ಅಸೆಂಬ್ಲಿ ಬಳಸಿ: ನಿಮ್ಮ ಕೋಡ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆ-ನಿರ್ಣಾಯಕ ವಿಭಾಗಗಳಿಗಾಗಿ, ವೆಬ್‌ಅಸೆಂಬ್ಲಿ ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ. ವೆಬ್‌ಅಸೆಂಬ್ಲಿ ಗಣನೀಯವಾಗಿ ಶ್ರಮದಾಯಕ ಕಾರ್ಯಗಳಿಗೆ ಸ್ಥಳೀಯ-ಸದೃಶ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಒದಗಿಸಬಹುದು.
• ಮೆಮೊರಿ ಲೇಔಟ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ: ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗಾಗಿ ಸರಿಯಾದ ಪಿಕ್ಸೆಲ್ ಫಾರ್ಮ್ಯಾಟ್ ಮತ್ತು ಮೆಮೊರಿ ಲೇಔಟ್ ಅನ್ನು ಆಯ್ಕೆಮಾಡಿ. ನೀವು ಆಗಾಗ್ಗೆ ಪ್ರತ್ಯೇಕ ಬಣ್ಣ ಘಟಕಗಳನ್ನು ಪ್ರವೇಶಿಸಬೇಕಾಗಿಲ್ಲದಿದ್ದರೆ ಪ್ಯಾಕ್ಡ್ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳನ್ನು (ಉದಾ., RGBA) ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.
• OffscreenCanvas ಬಳಸಿ: ಹಿನ್ನೆಲೆ ಸಂಸ್ಕರಣೆಗಾಗಿ, ಮುಖ್ಯ ಥ್ರೆಡ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸುವುದನ್ನು ತಪ್ಪಿಸಲು OffscreenCanvas ಬಳಸಿ.
• ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಪ್ರೊಫೈಲ್ ಮಾಡಿ: ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಪ್ರೊಫೈಲ್ ಮಾಡಲು ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸಲು ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಪರಿಕರಗಳನ್ನು ಬಳಸಿ.

ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ

ವೆಬ್‌ಕೋಡೆಕ್ಸ್ ಮತ್ತು VideoFrame API ಅನ್ನು ಕ್ರೋಮ್, ಫೈರ್‌ಫಾಕ್ಸ್, ಮತ್ತು ಸಫಾರಿ ಸೇರಿದಂತೆ ಹೆಚ್ಚಿನ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಬೆಂಬಲಿಸಲಾಗುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಬ್ರೌಸರ್ ಆವೃತ್ತಿ ಮತ್ತು ಆಪರೇಟಿಂಗ್ ಸಿಸ್ಟಮ್ ಅನ್ನು ಅವಲಂಬಿಸಿ ಬೆಂಬಲದ ಮಟ್ಟವು ಬದಲಾಗಬಹುದು. ನೀವು ಬಳಸುತ್ತಿರುವ ವೈಶಿಷ್ಟ್ಯಗಳು ನಿಮ್ಮ ಗುರಿ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಬೆಂಬಲಿತವಾಗಿವೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು MDN ವೆಬ್ ಡಾಕ್ಸ್ ನಂತಹ ಸೈಟ್‌ಗಳಲ್ಲಿ ಇತ್ತೀಚಿನ ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ ಕೋಷ್ಟಕಗಳನ್ನು ಪರಿಶೀಲಿಸಿ. ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಗಾಗಿ, ವೈಶಿಷ್ಟ್ಯ ಪತ್ತೆಹಚ್ಚುವಿಕೆಯನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ.

ಸಾಮಾನ್ಯ ಅಪಾಯಗಳು ಮತ್ತು ದೋಷನಿವಾರಣೆ

VideoFrame ಪ್ಲೇನ್‌ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ ತಪ್ಪಿಸಬೇಕಾದ ಕೆಲವು ಸಾಮಾನ್ಯ ಅಪಾಯಗಳು ಇಲ್ಲಿವೆ:

• ತಪ್ಪಾದ ಲೇಔಟ್: layout ಸರಣಿಯು ಪಿಕ್ಸೆಲ್ ಡೇಟಾದ ಮೆಮೊರಿ ಲೇಔಟ್ ಅನ್ನು ನಿಖರವಾಗಿ ವಿವರಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ತಪ್ಪಾದ ಆಫ್‌ಸೆಟ್‌ಗಳು ಅಥವಾ ಸ್ಟ್ರೈಡ್‌ಗಳು ಹಾಳಾದ ಚಿತ್ರಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು.
• ಹೊಂದಾಣಿಕೆಯಾಗದ ಪಿಕ್ಸೆಲ್ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳು: ನೀವು copyTo ವಿಧಾನದಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸುವ ಪಿಕ್ಸೆಲ್ ಫಾರ್ಮ್ಯಾಟ್ VideoFrameನ ನಿಜವಾದ ಫಾರ್ಮ್ಯಾಟ್‌ಗೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
• ಮೆಮೊರಿ ಸೋರಿಕೆಗಳು: VideoFrame ಮತ್ತು CanvasImageBitmap ಆಬ್ಜೆಕ್ಟ್‌ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮುಗಿದ ನಂತರ ಯಾವಾಗಲೂ ಅವುಗಳನ್ನು ಮುಚ್ಚಿ, ಆಧಾರವಾಗಿರುವ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಬಿಡುಗಡೆ ಮಾಡಲು. ಹಾಗೆ ಮಾಡಲು ವಿಫಲವಾದರೆ ಮೆಮೊರಿ ಸೋರಿಕೆಗೆ ಕಾರಣವಾಗಬಹುದು.
• ಅಸಮಕಾಲಿಕ ಕಾರ್ಯಾಚರಣೆಗಳು: copyTo ಒಂದು ಅಸಮಕಾಲಿಕ ಕಾರ್ಯಾಚರಣೆ ಎಂಬುದನ್ನು ನೆನಪಿಡಿ. ನೀವು ಪಿಕ್ಸೆಲ್ ಡೇಟಾವನ್ನು ಪ್ರವೇಶಿಸುವ ಮೊದಲು ನಕಲು ಕಾರ್ಯಾಚರಣೆ ಪೂರ್ಣಗೊಂಡಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು await ಬಳಸಿ.
• ಭದ್ರತಾ ನಿರ್ಬಂಧಗಳು: ಕ್ರಾಸ್-ಆರಿಜಿನ್ ವೀಡಿಯೊಗಳಿಂದ ಪಿಕ್ಸೆಲ್ ಡೇಟಾವನ್ನು ಪ್ರವೇಶಿಸುವಾಗ ಅನ್ವಯಿಸಬಹುದಾದ ಭದ್ರತಾ ನಿರ್ಬಂಧಗಳ ಬಗ್ಗೆ ತಿಳಿದಿರಲಿ.

ಉದಾಹರಣೆ: YUV ನಿಂದ RGB ಪರಿವರ್ತನೆ

ಒಂದು ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಉದಾಹರಣೆಯನ್ನು ಪರಿಗಣಿಸೋಣ: YUV420 VideoFrame ಅನ್ನು RGB VideoFrame ಗೆ ಪರಿವರ್ತಿಸುವುದು. ಇದು Y, U, ಮತ್ತು V ಪ್ಲೇನ್‌ಗಳನ್ನು ಓದುವುದು, ಅವುಗಳನ್ನು RGB ಮೌಲ್ಯಗಳಿಗೆ ಪರಿವರ್ತಿಸುವುದು, ಮತ್ತು ನಂತರ ಹೊಸ RGB VideoFrame ಅನ್ನು ರಚಿಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ.

ಈ ಪರಿವರ್ತನೆಯನ್ನು ಈ ಕೆಳಗಿನ ಸೂತ್ರವನ್ನು ಬಳಸಿ ಕಾರ್ಯಗತಗೊಳಿಸಬಹುದು:

R = Y + 1.402 * (Cr - 128)
G = Y - 0.34414 * (Cb - 128) - 0.71414 * (Cr - 128)
B = Y + 1.772 * (Cb - 128)

ಇಲ್ಲಿದೆ ಕೋಡ್:

async function convertYUV420ToRGBA(videoFrame) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;

  const yPlaneSize = width * height;
  const uvPlaneSize = width * height / 4;

  const yuvBuffer = new ArrayBuffer(yPlaneSize + 2 * uvPlaneSize);
  const yuvPlanes = new Uint8ClampedArray(yuvBuffer);

  const layout = [
    { offset: 0, stride: width }, // Y ಪ್ಲೇನ್
    { offset: yPlaneSize, stride: width / 2 }, // U ಪ್ಲೇನ್
    { offset: yPlaneSize + uvPlaneSize, stride: width / 2 } // V ಪ್ಲೇನ್
  ];

  await videoFrame.copyTo(yuvPlanes, {
    format: 'I420',
    codedWidth: width,
    codedHeight: height,
    layout: layout
  });

  const rgbaBuffer = new ArrayBuffer(width * height * 4);
  const rgba = new Uint8ClampedArray(rgbaBuffer);

  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      const yIndex = y * width + x;
      const uIndex = Math.floor(y / 2) * (width / 2) + Math.floor(x / 2) + yPlaneSize;
      const vIndex = Math.floor(y / 2) * (width / 2) + Math.floor(x / 2) + yPlaneSize + uvPlaneSize;

      const Y = yuvPlanes[yIndex];
      const U = yuvPlanes[uIndex] - 128;
      const V = yuvPlanes[vIndex] - 128;

      let R = Y + 1.402 * V;
      let G = Y - 0.34414 * U - 0.71414 * V;
      let B = Y + 1.772 * U;

      R = Math.max(0, Math.min(255, R));
      G = Math.max(0, Math.min(255, G));
      B = Math.max(0, Math.min(255, B));

      const rgbaIndex = y * width * 4 + x * 4;
      rgba[rgbaIndex] = R;
      rgba[rgbaIndex + 1] = G;
      rgba[rgbaIndex + 2] = B;
      rgba[rgbaIndex + 3] = 255; // ಆಲ್ಫಾ
    }
  }

  const newFrame = new VideoFrame(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  videoFrame.close(); // ಮೂಲ ಫ್ರೇಮ್ ಅನ್ನು ಬಿಡುಗಡೆ ಮಾಡಿ
  return newFrame;
}

ಈ ಉದಾಹರಣೆಯು VideoFrame ಪ್ಲೇನ್‌ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವ ಶಕ್ತಿ ಮತ್ತು ಸಂಕೀರ್ಣತೆಯನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ. ಇದಕ್ಕೆ ಪಿಕ್ಸೆಲ್ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳು, ಮೆಮೊರಿ ಲೇಔಟ್, ಮತ್ತು ಬಣ್ಣದ ಸ್ಥಳ ಪರಿವರ್ತನೆಗಳ ಉತ್ತಮ ತಿಳುವಳಿಕೆ ಅಗತ್ಯವಿದೆ.

ತೀರ್ಮಾನ

ವೆಬ್‌ಕೋಡೆಕ್ಸ್‌ನಲ್ಲಿನ VideoFrame ಪ್ಲೇನ್ API ಬ್ರೌಸರ್‌ನಲ್ಲಿ ವೀಡಿಯೊ ಸಂಸ್ಕರಣೆಯ ಮೇಲೆ ಹೊಸ ಮಟ್ಟದ ನಿಯಂತ್ರಣವನ್ನು ಅನ್ಲಾಕ್ ಮಾಡುತ್ತದೆ. ಪಿಕ್ಸೆಲ್ ಡೇಟಾವನ್ನು ನೇರವಾಗಿ ಪ್ರವೇಶಿಸುವುದು ಮತ್ತು ಮ್ಯಾನಿಪ್ಯುಲೇಟ್ ಮಾಡುವುದು ಹೇಗೆಂದು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ರಿಯಲ್-ಟೈಮ್ ವೀಡಿಯೊ ಎಫೆಕ್ಟ್ಸ್, ಕಂಪ್ಯೂಟರ್ ದೃಷ್ಟಿ, ವೀಡಿಯೊ ಎಡಿಟಿಂಗ್, ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಿಗಾಗಿ ಸುಧಾರಿತ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು. VideoFrame ಪ್ಲೇನ್‌ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವುದು ಸವಾಲಿನದ್ದಾಗಿರಬಹುದಾದರೂ, ಸಂಭಾವ್ಯ ಪ್ರತಿಫಲಗಳು ಗಮನಾರ್ಹವಾಗಿವೆ. ವೆಬ್‌ಕೋಡೆಕ್ಸ್ ವಿಕಸನಗೊಳ್ಳುತ್ತಾ ಹೋದಂತೆ, ಇದು ಮೀಡಿಯಾದೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವ ವೆಬ್ ಡೆವಲಪರ್‌ಗಳಿಗೆ ನಿಸ್ಸಂದೇಹವಾಗಿ ಒಂದು ಅತ್ಯಗತ್ಯ ಸಾಧನವಾಗಲಿದೆ.

VideoFrame ಪ್ಲೇನ್ API ಯೊಂದಿಗೆ ಪ್ರಯೋಗ ಮಾಡಲು ಮತ್ತು ಅದರ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಅನ್ವೇಷಿಸಲು ನಾವು ನಿಮ್ಮನ್ನು ಪ್ರೋತ್ಸಾಹಿಸುತ್ತೇವೆ. ಆಧಾರವಾಗಿರುವ ತತ್ವಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನ್ವಯಿಸುವ ಮೂಲಕ, ನೀವು ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಸಾಧ್ಯವಿರುವ ಗಡಿಗಳನ್ನು ಮೀರುವ ನವೀನ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯ ವೀಡಿಯೊ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು.

ಹೆಚ್ಚಿನ ಕಲಿಕೆ

• ವೆಬ್‌ಕೋಡೆಕ್ಸ್ ಕುರಿತು MDN ವೆಬ್ ಡಾಕ್ಸ್
• ವೆಬ್‌ಕೋಡೆಕ್ಸ್ ನಿರ್ದಿಷ್ಟೀಕರಣ
• GitHub ನಲ್ಲಿ ವೆಬ್‌ಕೋಡೆಕ್ಸ್ ಮಾದರಿ ಕೋಡ್ ರೆಪೊಸಿಟರಿಗಳು.